<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户管理</title>
    <!-- 引入 Semantic UI 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">
    <link rel="stylesheet" href="css/用户管理.css" />
</head>
<body>

    <!-- 导航栏 -->
    <nav class="ui inverted  attached segment m-padded-tb-mini">
    	<div class="ui container">
    	<div class="ui inverted secondary menu">
    		<h2 class="ui teal header item">管理后台</h2>
    		<a class="item" href="首页.html">
    		    <i class="home icon"></i> 博客首页
    		</a>
    		<a class="item" href="文章管理.html">
    		    <i class="write icon"></i> 文章管理
    		</a>
    		<a class="item" href="文章发布.html">
    		    <i class="edit icon"></i> 文章发布
    		</a>
    		<a class="item" href="分类管理.html">
    		    <i class="folder open icon"></i> 分类管理
    		</a>
    		<a class="item" href="标签管理.html">
    		    <i class="tag icon"></i> 标签管理
    		</a>
    		<a class="item active" href="用户管理.html">
    		    <i class="settings icon"></i> 用户管理
    		</a>
    		<div class="right menu">
    			<div class="ui dropdown item">
    				<div class="text">
    					<img class="ui avatar image" src="images/屏幕截图 2024-04-28 125007.png">
    					用户名
    				</div>
    				<i class="dropdown icon"></i>
    				<div class="menu">
    					<a href="#" class="item">注销</a>
    					
    				</div>	
    			</div>
    			
    		</div>
    		</div>
    	</div>
    </nav>
    

    <!-- 页面内容 -->
    <div class="main container">
        <h1 class="ui header">用户管理</h1>
        <div class="ui segment user-list">
            <table class="ui very basic table user-table">
                <thead>
                    <tr>
                        <th>头像</th>
                        <th>用户名</th>
                        <th>昵称</th>
                        <th>邮箱</th>
                        <th>是否为管理员</th>
                        <th>注册时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 用户数据 -->
					 <tr>
					    <td class="image">
					        <img src="https://semantic-ui.com/images/avatar2/small/elliot.jpg">
					         </td>
					    <td>用户1</td>
					    <td>昵称1</td>
					    <td>user1@example.com</td>
					    <td>是</td>
					     <td>2024-01-01</td>
					    <td>
					                            <button class="ui button" onclick="showEditUserModal('用户1')">
					                                编辑
					                            </button>
					                            <button class="ui button negative" onclick="showDeleteUserModal('用户1')">
					                                删除
					                            </button>
					                        </td>
					                    </tr>
					                    <!-- 更多用户列表项 -->
					                    <tr>
					                        <td class="image">
					                            <img src="https://semantic-ui.com/images/avatar2/small/jenny.jpg">
					                        </td>
					                        <td>用户2</td>
					                        <td>昵称2</td>
					                        <td>user2@example.com</td>
					                        <td>否</td>
					                        <td>2024-02-15</td>
					                        <td>
					                            <button class="ui button" onclick="showEditUserModal('用户2')">
					                                编辑
					                            </button>
					                            <button class="ui button negative" onclick="showDeleteUserModal('用户2')">
					                                删除
					                            </button>
					                        </td>
					                    </tr>
                </tbody>
                <tfoot>
                    <tr>
                        <th colspan="7">
                            <div class="ui pagination menu">
                                <a class="icon item" href="#">
                                    <i class="left chevron icon"></i>
                                </a>
                                <a class="item" href="#">1</a>
                                <a class="item" href="#">2</a>
                                <a class="item" href="#">3</a>
                                <a class="icon item" href="#">
                                    <i class="right chevron icon"></i>
                                </a>
                            </div>
                        </th>
                    </tr>
                </tfoot>
            </table>
        </div>
    </div>

    <!-- 用户编辑模态框 -->
    <div class="ui modal" id="editUserModal">
        <div class="header">
            编辑用户
        </div>
        <div class="content">
            <div class="ui form">
                <div class="field">
                    <label>用户名</label>
                    <input type="text" id="editUsername" placeholder="用户名">
                </div>
                <div class="field">
                    <label>昵称</label>
                    <input type="text" id="editNickname" placeholder="昵称">
                </div>
                <div class="field">
                    <label>邮箱</label>
                    <input type="email" id="editEmail" placeholder="邮箱">
                </div>
                <div class="field">
                    <label>是否为管理员</label>
                    <div class="ui checkbox">
                        <input type="checkbox" id="editIsAdmin">
                        <label>管理员</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="actions">
            <div class="ui button deny">取消</div>
            <div class="ui button positive right labeled icon" onclick="editUserConfirm()">
                保存
                <i class="checkmark icon"></i>
            </div>
        </div>
    </div>

    <!-- 用户删除模态框 -->
    <div class="ui modal" id="deleteUserModal">
        <div class="header">
            删除用户
        </div>
        <div class="content">
            <p>您确定要删除该用户吗？</p>
        </div>
        <div class="actions">
            <div class="ui button deny">取消</div>
            <div class="ui button negative right labeled icon" onclick="deleteUserConfirm()">
                删除
                <i class="trash icon"></i>
            </div>
        </div>
    </div>

    <!-- 引入 Semantic UI 的 JavaScript 文件 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>
    <script src="js/用户管理.js"></script>

</body>
</html>




   